<!DOCTYPE html>
<!--这里是注释-->
<!--这是注释-->
<!--html文件  需要分成2部分
head和body
语法1:所有的东西  都是标签
标签:1.<标签名 属性1="属性值" 属性2="属性值".../>
     2.<标签名  属性1="属性值" 属性2="属性值">这里可放其他内容
     </标签名>
-->
<html lang="en">
<head>
    <!--head的内容 都不会显示在浏览器中
    是设置这个页面的一些基本属性用的-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--这里的 内容全部会显示在浏览器当中
所有在body中写的内容  都会按顺序 写在页面中 并不会换行
因为我们没有告诉浏览器要换行
所有的空格 换行 都会被浏览器渲染成一个空格-->
HelloHTML
<!-- br 换行标签  单标签  可以省略/-->
<br/>
这是第二行<br> 这是第三行
<!--hr 分割线 也是单标签 可以不写-->
<hr>
<!--双标签  文本相关-->
<!--h 标签  用来表示标题,它会被浏览器渲染成指定的格式
HTML规定  标题最多到6级, 再往后就没有了,也就没有格式了
标题标签 需要在标签体重,包裹 文本内容,使之成为标题
并且会独立成行-->


<h1 id="sd">一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<h7>7级标题</h7>
<h100>100级标题</h100>
<hr>
<!--p标签 是段落标签, 每一个自然段  用p标签包裹
这是我们非常常用的标签
p 标签只能 成段, 独立换行, 不能 保留内部的格式-->
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3, 段落很长很长很长很长很长很长很长很长很长很长很长很长</p>
<hr>


<h1>静夜思</h1>
<p>床前明月光,</p>
<p>疑是地上霜.</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>


<hr>

<h1>咏鹅</h1>
<!--pre 标签作用 和p标签类似, 只不过  可以保留内部的格式-->
<pre>鹅 鹅 鹅</pre>
<pre>  曲项向天歌</pre>
<pre>    白毛浮绿水</pre>
<pre>      红掌拨清波</pre>
<hr>

<h1>悯农</h1>
<!--我们可以使用font 标签 包裹若干文字,那么被包裹的文字, 就有了设置字体样式的能力
字体颜色: 使用color属性, HTML 内置了一些颜色信息
如red yellow,... 可以直接使用这个颜色名
如果内置的这些颜色  都不能满足我们, 那么我们可以使用
#6位16进制的数字 来表示一个颜色  # 必须写的
如果 rgb 三种颜色分量的2个数位  数字是一样的
形如 ff6677 AA8822 这种的  也可以用3位 表示 即#F67 #-->
<p>锄禾<font color="red">日</font>当午</p>
<p><font color="#ff8888">汗滴</font>禾下土</p>

<p>谁知盘中餐</p>

<p>粒粒皆辛苦</p>

<hr>
<!--使用font设置字体大小  只有档位,没有具体的大小
范围1-7 超出范围  按照 边界条件
即8以上  就按照7的大小,并且数字越大,字号越大-->
<p><font size="0">0</font> </p>
<p><font size="1">1</font> </p>
<p><font size="2">2</font> </p>
<p><font size="3">3</font> </p>
<p><font size="4">4</font> </p>
<p><font size="5">5</font> </p>
<p><font size="6">6</font> </p>
<p><font size="7">7</font> </p>
<p><font size="8">8</font> </p>

<!--可以使用face 属性来设置字体,但是具体显示的是什么字体,跟浏览器,跟操作系统 都没有关系
所以在网页中,很少会去改字体,而之后我们会学习通过字体文件来显示图片-->
<p><font face="楷体">这是一行文字</font></p>
<p>这是一行文字</p>
<p><font face="隶书">这是一行文字</font></p>
<hr>

<p>
    <!--strong : 标签可以用来加粗
    em:斜体,也可以使用<i>
    del : 删除线, 也可以使用<s>
    ins:下划线,也可以使用<u>
    <i>: 设计这个标签的时候,是把它当做斜体来设计的 但是随着没有文化的程序员越来越多,它被当做了 图标标签 专门用来显示一个图标(通过加载字体文件的方式)
    被一厢情愿的认为是icon的简写-->
    怒发冲冠，凭栏处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，
    八千里路云和月。莫等闲，白了少年头，空悲切！(栏 通：阑)
    靖康耻，犹未雪。<strong>臣子恨,</strong><em>何时灭！</em><del>驾长车，</del>踏破贺兰山缺。<ins>壮志饥餐胡虏肉，</ins>
    笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。(壮志 一作：壮士；兰山缺 一作：兰山阙)
</p>

<br>
<br>
<br>
<hr>

<!--图片标签
src属性,指向的是图片的路径
如果直接以英文字母开头(mac/linux)
那么表示的是相对路径, 是相对于 当前的这个HTML页面在相对路径中,

..表示上一级文件夹
.表示当前文件夹
路径 也可用 绝对路径, 但是不要使用
即 在src 这 放入你图片文件的绝对路径
图片 宽: width
高: height
改图片的尺寸, 只是修改图片的显示尺寸,不会影响真实图片的大小
并且不能保证图片的比例
如果想要保证图片比例,只需要指定  宽/高中的一个, 另一个不要写 那么浏览器 就会按照指定的大小
显示图片的宽/高
没指定的  就会按照比例缩放
title 标题  鼠标放在图片上时  显示的文字
alt 当图片有错误  无法显示的时候, 提示信息
-->

<img src="tanke1.jpg" width="1000" height="750" title="E100"/>
<img src="laoshu.jpg" width="1000" height="1000" alt="高清无码大图"/>

<hr>
<!--音乐播放
使用src属性  指定音乐的位置
hidden属性指定  是否显示音乐播放的控件-->
<!--<embed src="陈雅森 - 温柔乡.mp3" >-->
    <hr>
<!--列表-->
<!--有序列表-->
    <ol start="5" type="i">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
<!--无序列表-->
<ul TYPE="circle">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>
        <ul type="circle">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
    </li>
</ul>
<hr>
<!--超链接
a标签标示超链接,可以点击去往不同的网页
href 是必填属性,表示要连接到的地址
文字需要放在a标签的内部
a标签的target  默认属性是_self: 表示在当前页面打开
可以换成_blank, 表示再打开一个新的标签页
还有2个属性,今晚查一下,明天提问-->
<a target="_blank" href="https://www.baidu.com"
title="鼠标的提示">点击查看</a>
<!--跳转到自己的页面  使用的是相对路径-->
<a target="_blank" href="2_HIHTML.html">点击查看</a>
<!--回到锚点-->
<a href="#sd">回到H1位置</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>
</html>